<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Top 10 Express Table Designs - Smashing Magazine Source</title>
		<style type="text/css">
			<!--
			@import url("resources/css/style.css");
			@import url("resources/css/tableStyle.css");	
			-->
		</style>
		<link rel="stylesheet" type="text/css" media="screen, projection" href="resources/css/customButton.css" />
		
		
		<script type="text/javascript" src="resources/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="resources/js/jquery.color.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function() {
				
				$('#menu-jquery li a').hover(
				
					function() {
						
						$(this).css('padding', '5px 15px')
								 .animate({'paddingLeft'	: '25px', 
											 'paddingRight'	: '25px', 
											 'backgroundColor':'rgba(0,0,0,0.5)'}, 
											 'fast');
					}, 
					
					function() {
						
						$(this).css('padding', '5px 25px')
								 .animate({'paddingLeft'	: '15px', 
								 			'paddingRight'		: '15px', 
								 			'backgroundColor' :'rgba(0,0,0,0.2)'}, 
								 			'fast');
				
				}).mousedown(function() {
			
					$(this).animate({'backgroundColor': 'rgba(0,0,0,0.1)'}, 'fast');

				}).mouseup(function() {
				
					$(this).animate({'backgroundColor': 'rgba(0,0,0,0.5)'}, 'fast');
				});				
			});
			
		</script>
	</head>

	<body>
	
		<div id="container">		
			<span class="title">Demo - Transportation Analysis System</span>
			<ul id="menu-jquery">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="GrayScale/">Image gallery</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			
		</div>	
	
		<table id="red-black" summary="2007 Major IT Companies' Profit">
			<thead>
				<tr>
					<th scope="col">Company</th>
					<th scope="col">Q1</th>
					<th scope="col">Q2</th>
					<th scope="col">Q3</th>
					<th scope="col">Q4</th>
				</tr>
			</thead>
			<tbody>
				<tr class="highlighted-row">
					<td>Microsoft</td>
					<td>20.3</td>
					<td>30.5</td>
					<td>23.5</td>
					<td>40.3</td>
				</tr>
				<tr>
					<td>Google</td>
					<td>50.2</td>
					<td>40.63</td>
					<td>45.23</td>
					<td>39.3</td>
				</tr>
				<tr>
					<td>Apple</td>
					<td>25.4</td>
					<td>30.2</td>
					<td>33.3</td>
					<td>36.7</td>
				</tr>
				<tr>
					<td>IBM</td>
					<td>20.4</td>
					<td>15.6</td>
					<td>22.3</td>
					<td>29.3</td>
				</tr>
			</tbody>
		</table>
	</body>

</html>